import create from 'zustand';
import { Theme } from 'react-toastify';

export interface GetThemeState {
    mode: Theme;       // 'light' | 'dark' | 'colored';
    isLight: boolean;
    selectOffBg: string;
    selectOnBg: string;
    selectOnBg2: string;
    btnColor: string;
    bgColor:string;     //isLight?"#FFFFFF":"#0D0931"
    bgColor0:string;     //isLight?"#FFFFFF":"#0D0931"
    bgColor1:string;     //isLight?"#FFFFFF":"#0D0931"
    bgColor2:string;     //isLight?"#FFFFFF":"#0D0931"
    bgColor3:string;     //isLight?"#FFFFFF":"#0D0931"
    txtColor:string;     //isLight?"#FFFFFF":"#0D0931"
    txtColor2:string;     //isLight?"#555178":"#0D0931"
    txtColor3:string;     //isLight?"#555178":"#0D0931"
    txtColor4:string;     //isLight?"#555178":"#0D0931"
    lineColor1:string;     //isLight?"#555178":"#0D0931"
    titleColor:string;
    tkTitleColor:string;
    arrowColor1:string;

    color1:string;       //select - box  boxShadow color  #0000004d #060227


    btnColor1:string;
    btnColor2:string;
    btnColor3:string;

    setMode: (mode: string) => void;
    setIsLight: (isl: boolean) => void;
    setBgColor: (color: string) => void;
    clear: () => void;
}

export const useGetThemeStateStore = create<GetThemeState>((set) => ({
    mode: 'dark',
    bgColor: '#FFFFFF',
    bgColor0: '#fbf9ff',
    bgColor1: '#F4F2F7',
    bgColor2:"#F8F6FA",
    bgColor3:"#fbf9ff",

    selectOffBg: '#BCB6E9',
    selectOnBg: '#F4F2F7',
    selectOnBg2: '#8689C9',
    txtColor: '#13112A',
    txtColor2: '#555178',
    txtColor3: '#555178',
    txtColor4: '#8689C9',
    titleColor: '#13112A',
    lineColor1: '#BCB6E9',
    btnColor: '#3358B8',
    tkTitleColor:"#3358B8",

    btnColor1:'#20A2DA',
    btnColor2:'#3358B8',
    btnColor3:'#BCB6E9',

    arrowColor1:'#555178',
    color1:'#0000004d',


    isLight: true,

    setMode(mode: Theme) {
        set(() => ({
            mode: mode,
            isLight: mode == 'light',
            bgColor: (mode == 'light') ? '#FFFF' : '#0D0931',
            bgColor0: (mode == 'light') ? '#fbf9ff' : '#060227',
            bgColor1: (mode == 'light') ? '#F4F2F7' : '#1B1342',
            bgColor2:(mode=="light")?"#F8F6FA":"#1B1342",
            bgColor3:(mode=="light")?"#fbf9ff":"#231955",

            btnColor1:(mode == 'light') ? '#20A2DA' : '#FFFFFF',
            btnColor2:(mode == 'light') ? '#3358B8' : '#FFFFFF',
            btnColor3:(mode == 'light') ? '#BCB6E9' : '#555178',

            txtColor: (mode == 'light') ? '#13112A' : '#FFFFFF',
            txtColor2: (mode == 'light') ? '#555178' : '#BCB6E9',
            txtColor3: (mode == 'light') ? '#555178' : '#F4F2F7',
            txtColor4: (mode == 'light') ? '#8689C9' : '#BCB6E9',
            titleColor: (mode == 'light') ? '#13112A' : '#F4F2F7',
            selectOffBg: (mode == 'light') ? '#BCB6E9' : '#13112A',
            selectOnBg: (mode == 'light') ? '#F4F2F7' : '#1B1342',
            selectOnBg2: (mode == 'light') ? '#8689C9' : '#BCB6E9',

            arrowColor1:(mode == 'light') ? '#555178' : '#FFFFFF',

            color1:(mode == 'light') ? '#0000004d' : '#060227',





            lineColor1: (mode == 'light') ? '#BCB6E9' : '#555178',
            btnColor: (mode == 'light') ? '#3358B8' : '#555178',





            tkTitleColor:(mode=="light")?"#3358B8":"#20A2DA",
        }));
    },

    setIsLight(isLight: boolean) {
        set(() => ({
            isLight
        }));
    },
    setBgColor(color: string) {
        set(() => ({
            bgColor: color
        }));
    },

    clear() {
        set(() => ({
            isLight: true,
            mode: "light",
            bgColor: '#FFFFFF',
            bgColor0: '#fbf9ff',
            bgColor1: '#F4F2F7',
            bgColor2:"#F8F6FA",
            bgColor3:"#fbf9ff",

            txtColor: '#13112A',
            txtColor2: '#555178',
            txtColor3: '#555178',

            titleColor: '#13112A',
            lineColor1: '#BCB6E9',

            tkTitleColor:"#3358B8",

            btnColor1:'#20A2DA',
            btnColor2:'#3358B8',
            btnColor3:'#BCB6E9',
            arrowColor1:'#555178',

            color1:'#0000004d',
        }));
    }
}));
